import React, { PureComponent, Fragment } from "react";
import "antd/dist/antd.css";
import { Input, Button, List } from "antd";

class TodoListUI extends PureComponent {
    state = {};
    render() {
        return (
            <Fragment>
                <div style={{ marginTop: "10px", marginLeft: "10px" }}>
                    <Input
                        value={this.props.inputValue}
                        placeholder="嗷嗷"
                        size="default"
                        style={{ width: "300px", marginRight: "10px" }}
                        onChange={this.props.handleInputChange}
                        onPressEnter={this.props.handleButtonClick}
                    />
                    <Button
                        onClick={this.props.handleButtonClick}
                        type="primary">
                        提交
                    </Button>
                </div>
                <List
                    style={{
                        width: "300px",
                        marginTop: "10px",
                        marginLeft: "10px"
                    }}
                    bordered
                    dataSource={this.props.list}
                    renderItem={(item, index) => (
                        <List.Item
                            onClick={() => {
                                this.props.handleItemDelete(index);
                            }}>
                            {item}
                        </List.Item>
                    )}
                />
            </Fragment>
        );
    }
}

export default TodoListUI;
